<template>
	<view>
		<view class="prefer-posi">
				<!-- 筛选页 -->
				<view class="delica-view">
					<view class="delica-list delica-grow" @click="multiple()">
						<text>{{multiSorting}}</text>
						<image src="../../../static/coen/paixu.png" mode="widthFix"></image>
					</view>
					<view class="delica-grow" @click="saleClick()" >销量高</view>
					<view class="delica-grow" @click="saleClick()">速度快</view>
					<view class="delica-grow" @click="saleClick()" >津贴联盟</view>
					<view class="delica-list delica-right" @click="filterClick()">
						<text>筛选</text>
						<image src="../../../static/coen/shaixuan.png" mode="widthFix"></image>
					</view>
				</view>
				
				<!-- 综合排序 -->
				<view class="sortlist sortlist-all" v-if="allShow">
					<block v-for="(item, index) in sortlist" :key="index">
						<text @click="sortClick(index, item.name, item.screen, item.nums)" :class="{active: index == num}">{{item.name}}</text>
					</block>
				</view>
				
				<!-- 筛选 -->
				<view class="sortlist sortlist-view" v-if="filterShow">
					<!-- 商家特色 -->
					<block v-for="(item, index) in screendata" :key="index">
						<view>
							<view class="sortlist-title">{{item.title}}</view>
							<view class="sortlist-flex">
								<block v-for="(itemdata, indexdata) in item.data" :key="indexdata">
								<text class="Choice" :class="{scractive: itemdata.id === 2}" @click="screenChoice(indexdata, itemdata.sign)">{{itemdata.name}}
								</text>
								</block>
							</view>
						</view> 
					</block>
					<!-- 人均价 -->
					<block v-for="(item, index) in person" :key="index">
						<view>
							<view class="sortlist-title">{{item.title}}</view>
							<view class="sortlist-flex">
								<block v-for="(itemdata, indexdata) in item.indexdata" :key="indexdata">
								<text class="Choice" :class="{scractive: indexdata == pernum}" @click="personChoice(indexdata, itemdata.per)">{{itemdata.name}}</text>
								</block>
							</view>
						</view>
					</block>
					<!-- 置顶 -->
					<view class="sortlist-bottom">
						<text @click="clear()">清空</text>
						<text @click="flag && complete()">完成</text>
					</view>
				</view>
			</view>
		
		<!-- 透明背景 -->
		<view class="shadow" v-if="shadow" @click="backClick()"></view>
	</view>
	</template>

<script>
	import {publicing} from '../../../api/api.js'
	import {startingurl, multipleurl} from '../../../api/request.js'
	
	export default{
		data(){
			return{
				multiSorting: "综合排序",
				flag: false,
				allShow: false,
				filterShow: false,
				shadow: false,
				pernum: -1,
				num: 0,
				multiobj: {},
				sortlist: [
					{
						"name":"综合排序",
						"screen":"_id",
						"nums":1
					},
					{
						"name":"起送价最低",
						"screen":"delivering",
						"nums":1
					},
					{
						"name":"配送费最低",
						"screen":"physical",
						"nums":1
					},
					{
						"name":"人均高到低",
						"screen":"capita",
						"nums":-1
					},
					{
						"name":"人均低到高",
						"screen":"capita",
						"nums":1
					}
				],
				screendata:[
					{
						"title": "商家特色（可多选）",
						"data": [
							{
								"id": 1,
								"sign": "duration",
								"name": "配送最快",
							},
							{
								"id": 1,
								"sign": "deliver",
								"name": "0元起送"
							},
							{
								"id": 1,
								"sign": "physi",
								"name": "免配送费"
							}
						]
					}
				],
				// 人均价筛选
				person:[
					{
						"title":"人均价",
						"indexdata":[
							{
							"name":"20元以下",
							"per":{
								"$lt":20
								},
							},
							{
							"name":"20-40元",
							"per":{
								"$lte":40,
								"$gte":20
								},
							},
							{
							"name":"40元以上",
							"per":{
								"$gt":40
								},
							},
						]
					}
				],
			}
		},
		
		methods:{
			// 综合排序
			multiple(){
				this.allShow = true;
				this.filterShow = false;
				this.shadowBack();
			},
			saleClick(){
				this.backClick();
			},
			filterClick(){
				this.shadow = false;
				this.filterShow = true;
				this.shadowBack()
			},
			sortClick(index, name, screen, nums){
				this.multiSorting = name;
				this.num = index;
				// console.log(screen + nums)
				this.backClick();
				this.starTing(screen, nums)
			},
			starTing(screen, nums){
				let Data = {
					screen, 
					nums
				}
				publicing(startingurl, Data)
				.then((res)=>{
					console.log(res)
					this.$store.commit('screenmuta', res.data)
				})
				.catch((err)=>{
					console.log(err)
				})
			},
			// 透明背景
			shadowBack(){
				setTimeout(()=>{
					this.shadow = true;
				}, 300)
			},
			// 隐藏透明背景
			backClick(){
				this.shadow = false;
				this.allShow = false;
				this.filterShow = false;
			},
		    // 商家特色
			screenChoice(indexdata, sign){
				console.log(sign)
				if(this.screendata[0].data[indexdata].id == 1){
					this.screendata[0].data[indexdata].id = 2
					this.$set(this.multiobj, sign, sign)
					console.log(this.multiobj)
					
				}else{
					this.screendata[0].data[indexdata].id = 1
					this.$delete(this.multiobj, sign)
					console.log(this.multiobj)
				}
				
			},
			// 人均价
			personChoice(index, name){
					
				if(this.pernum == index){
					this.pernum = -1
					this.$delete(this.multiobj, 'capita')
					console.log(this.multiobj)
					
				}else{
					this.pernum = index
					this.$set(this.multiobj, 'capita', name)
					console.log(this.multiobj)
				}
				
			},
			// 完成
			complete(){
				this.backClick()
				publicing(multipleurl, this.multiobj)
				.then((res)=>{
					console.log(res)
					// 存到数据仓库
					this.$store.commit('screenmuta', res.data)
				})
				.catch((err)=>{
					console.log(res)
				})
			},
			
			clear(){
				this.screendata.forEach((item)=>{
					let arr = item.data.map((items)=>{
						items.id = 1
						return items
					})
				})
				// 清空返回 完成按钮未禁用bug
				this.multiobj = {}
				this.pernum = -1
				this.backClick()
			},
				
		},
		// 未点击筛选条件,完成按钮禁用
		computed:{
			emptyArr(){
				let obj = JSON.stringify(this.multiobj) == '{}'
				console.log(obj)
				if(obj == true){
					this.flag = false
				}else{
					this.flag = true
				}
			}
		}
	}
</script>

<style>
	/* 筛选页 */
	.delica-view image{width: 30upx; height: 30upx; display: block;
		}
	.delica-view{font-size: 30upx; display: flex; align-items: center;
	color: #666666;
	height: 70upx;
	padding: 0 15upx;
	background: #FFFFFF;
	} 
	.delica-list{display: flex; align-items: center;}
	.delica-right{justify-content: flex-end; flex-grow: 5;}
	.delica-grow{flex-grow: 1;}
	.prefer-posi{position: absolute; left: 0; right: 0;
		width: 100%;
		z-index: 99;}
	/* 排序 */
	.sortlist{background: #ffffff;}
	.sortlist-all text{
	padding: 0 15upx;
	display: block;
	font-size: 30upx;
	height: 70upx;
	line-height: 70upx;
	border-top: 1rpx solid #ededed;}
	.active {
			color: #f89903 !important;
		}
	/* 选择 */
	/*相对定位*/
	.sortlist-view{height: 700upx; overflow: hidden;
	overflow-y: scroll;
	position: relative;
	}
	.sortlist-title{padding: 0 15upx;
	font-size: 30upx;
	height: 60upx;
	line-height: 60upx;}
	.Choice{font-size: 28upx; background: #f8f8f8;
	height: 55upx;
	line-height: 55upx;
	color: #666666;
	width: calc((100% / 3) - 15px) !important;
	margin: 7.5px;
	text-align: center;
	display: block;
	border-radius: 5upx;
	}
	.sortlist-flex{
		display: flex; flex-wrap: wrap;
		align-items: center;
		margin-bottom: 30upx;
	}
	.sortlist-bottom{background: #ffffff; height: 80upx;
	border-top: 1upx solid #e4e4e4;
	display: flex; justify-content: space-around;
	align-items: center;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;}
	.sortlist-bottom text{flex-grow: 1; height: 80upx;
	line-height: 80upx;
	text-align: center;
	}
	.sortlist-bottom text:nth-child(1){border-right: 1upx solid #e4e4e4;}
	.sortlist-bottom text:nth-child(2){background: #ffd348;}
	.shadow{background: rgba(0,0,0,0.5); position: fixed; top: 0; left: 0; right: 0; bottom: 0;}
	/* 商家特色加样式 */
	.scractive{background: #fef6df !important; color: #f29909 !important;}
</style>
